<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- html5画布--canvas -->
    <canvas id="demo"></canvas>
    <script>
        // function initCanvas() {
        //     let canvas = document.querySelector('#demo');
        //     let gd = canvas.getContext('2d'); // 二维绘图 句柄
        //     let img = new Image();
        //     img.src = 'https://img.36krcdn.com/20220609/v2_cfb63111b0584ca5b97c4c0bb5006f69_img_jpg'
        //     img.onload = function () {
        //         gd.drawImage(img, 0, 0)
        //     } // onload只执行一次 外部没有一直引用这个函数返回，执行后释放闭包内容，闭包内变量垃圾回收
        //     // canvas.onClick = function () {
        //     //     console.log('闭包变量永生')
        //     // } 不垃圾回收，占内存
        // }
        let canvas = document.querySelector('#demo');
        let gd = canvas.getContext('2d'); // 二维绘图 句柄
        function initCanvas() {
            // img 函数内部局部变量 函数出栈后check，如果没人要用了，就垃圾回收掉了
            let img = new Image();
            img.src = 'https://img.36krcdn.com/20220609/v2_cfb63111b0584ca5b97c4c0bb5006f69_img_jpg'
            img.onload = function () {
                gd.drawImage(img, 0, 0)
            }
        }
        function initEvent() {
            canvas.onclick = function () {

            }
        }
        initCanvas(); // 出栈 内部没有子函数 没有外部调用的机会 所以函数内部变量都可以销毁
        initEvent();
    </script>
</body>

</html>